<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!--
******************************************************************
Use Case 3.0 Show Map:  by Kenneth Ng,  lastupdated: 3/23/2010

Functional Specification

Show Map use jQuery and Map API to display a grey box to show the google map for meeting place.
The functional using HTTP GET with "Addr=" to pass the address.  The gray box will 
show the map with the proper address.  User can click on any gray area on the side
to return to the current page.  The link "Driving direction" below the map will
show the map direction with the default destination address pre-fill in the box.

Web Master Maintenance:
**************************************************************
Web Master will not need to monitor the google map module.  The
map will show as long as the address is properly entered in the event.

For installation, a new key will need to aquired from Google, 
here is the example to enter the key: 

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAPOBsLtf1fq2Im2sEiU-6UhQd22Grf9IKmPGUd3sckVmPHWTBWxRzXqpaMHTofFJtXe3XbeuC6I5Xvg" type="text/javascript"></script>
-->

<head>
	<title>geography quiz with Map</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAeKEtEeZgQYP75EaxmDAnJBS5MMVrLN6YNGjHo75MfiuRps-CARQXyPnXZefsl6rJZYdV9MAapE23XA" type="text/javascript"></script>
     
<script language="JavaScript" type="text/javascript" src="include/js/gmap.js"></script> 
<script language="JavaScript" type="text/javascript">   
// main function 
window.onload = function() {
    initialize();
    showAddress("<?php echo $_GET['addr']; ?>");
}
</script>

<style type="text/css">
	.prop {
        height:40px;
	}
	A:link {text-decoration: none; color: yellow;}
    A:visited {text-decoration: none; color: yellow;}
    A:active {text-decoration: none; color: yellow;}
    A:hover {text-decoration: underline; color: red;}
</style> 
</head>

<body>

<table border=0><tr>
<td >
    <div id="map_canvas" style="width: 450px; height: 300px"></div>
    <table border=0><tr><td align="left" width="60%"><FONT size="small"><b><a href="http://maps.google.com/maps?daddr=<?php echo $_GET['addr']; ?>">Driving direction</a></b></FONT></td>
    <td align="right" >
    <FONT COLOR="yellow" size="small"><b>click grey area to go back</b></FONT></td></tr></table>     
    <DIV id = "status"><p id = "statusMsg">.</p> </DIV>
</td>
</tr>
</table>

</body>
</html>
